<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onLoad, onPageScroll, onReady, onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import TnSticky from '@tuniao/tnui-vue3-uniapp/components/sticky/src/sticky.vue'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import TnPhotoAlbum from '@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue'
import TnLazyLoad from '@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue'
import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import TnScrollList from '@tuniao/tnui-vue3-uniapp/components/scroll-list/src/scroll-list.vue'
import TnNoticeBar from '@tuniao/tnui-vue3-uniapp/components/notice-bar/src/notice-bar.vue'
import TnActionSheet from '@tuniao/tnui-vue3-uniapp/components/action-sheet/src/action-sheet.vue'
import TnBubbleBox from '@tuniao/tnui-vue3-uniapp/components/bubble-box/src/bubble-box.vue'
import { isEmpty, tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { BubbleBoxOption } from '@tuniao/tnui-vue3-uniapp'
import type { TnActionSheetInstance } from '@tuniao/tnui-vue3-uniapp'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import circles from '@/api/circles.js'
import user from '@/api/user.js'
import { FILE_URL, SYSTEM_CONFIG, USER_TOKEN } from '@/api/config.js'

const paging = ref(null)
useZPaging(paging)
const actionSheetRef = ref<TnActionSheetInstance>()
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const {
  triggerElementId,
  navbarOpacity,
  opacityScrollHandle,
  init: initTransparentScroll,
} = useScrollTransparentNavbar(instance)
const { navBarInfo } = useUniAppSystemRectInfo()

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const state = reactive({
  loading: false,
  circlesId: 0,
  circles: {
    name: '',
    image: '',
    bg_image: '',
    poiaddress: '',
    longitude: '',
    latitude: '',
    introduce: '',
    open_plate: '',
    status: '10',
    ban_date: '',
    wechat_id: '',
    user_id: '',
    user_ids: '',
    is_manage: 0,
    join_method: 10,
    follow_total: 0,
    dynamic_total: 0,
    user_join_status: '-1',
  },
  applyReason: '',
  currentTabIndex: 0,
  tabsData: [
    {
      plate: 'dynamic',
      text: '动态',
    },
    {
      plate: 'usedIdle',
      text: '闲置',
    },
    {
      plate: 'organizeBureau',
      text: '组局',
    },
  ],
  tabsPlateData: [],
  currentTagIndex: -1,
  tagsData: [],
  circlesZoneId: 0,
  circlesPlate: 'dynamic',
  showPublishPopup: false,
  showIntroducePopup: false,
  showBlockPopup: false,
  showJoinUpPopup: false,
  publishPlate: [],
  openPlates: [],
  sortValue: 'newest_publish',
  sortName: '新发',
  circlesJoinModalRef: false,
  // 置顶数据
  topCirclesPostLists: [],
  topData: [],
  circlesPostLists: [],
  userToken: '',
  systemConfig: {},
})

const bubbleOptions: BubbleBoxOption = [{ text: '新发' }, { text: '新回' }]
const clickBubbleOptions = (index: number) => {
  if (index == 0) {
    state.sortValue = 'newest_publish'
    state.sortName = '新发'
  } else {
    state.sortValue = 'newest_reply'
    state.sortName = '新回'
  }
  paging.value.reload(true)
}

const wechatIdModalRef = ref<TnModalInstance>()

const openWechatIdModal = () => {
  if (isEmpty(state.circles.wechat_id)) {
    uni.showToast({
      title: '暂未绑定微信号',
      duration: 2000,
      icon: 'none',
    })
    return
  }
  wechatIdModalRef.value?.showModal({
    title: '圈主微信',
    content: state.circles.wechat_id,
    confirmText: '确认',
  })
}

// 点击板块标签
const handleTagClick = (index: number, circlesZoneId: number) => {
  if (state.currentTagIndex == index) {
    state.currentTagIndex = -1
    state.circlesZoneId = 0
  } else {
    state.currentTagIndex = index
    state.circlesZoneId = circlesZoneId
  }
  console.log('circlesZoneId', circlesZoneId)
  paging.value.reload(true)
}

// 点击悬浮发布按钮
const handlePublishPopupClick = () => {
  if (state.userToken == '') {
    uni.showModal({
      title: '提示',
      content: '请登录后进行发布！',
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          tnNavPage('/pages/login/login')
        }
      },
    })
    return
  }
  if (state.circles.user_join_status != '1') {
    uni.showModal({
      title: '提示',
      content: '您未成功加入圈子，请先加入',
      confirmText: '加入',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          userJoinCircles()
        }
      },
    })
    return
  }
  state.showPublishPopup = true
}

const jumpMap = (
  longitude: any,
  latitude: any,
  location: any,
  poiaddress: any
) => {
  tnNavPage(
    `/pagesA/location?longitude=${longitude}&latitude=${latitude}&location=${location}&poiaddress=${poiaddress}`
  )
}

const viewMember = () => {
  if (state.userToken == '') {
    uni.showModal({
      title: '提示',
      content: '请登录后进行操作！',
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          tnNavPage('/pages/login/login')
        }
      },
    })
    return
  }
  tnNavPage(`/circlesPages/member?circlesId=${state.circlesId}`)
}

const jumpPublishPage = (jumpUrl: string) => {
  tnNavPage(jumpUrl)
  state.showPublishPopup = false
}

const viewIntroduce = () => {
  state.showIntroducePopup = true
}
// 跳转到帖子详情页面
const navCirclesPostDetailPage = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/detail?circlesPostId=${circlesPostId}`)
}
const navVideoLists = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/video?circlesPostId=${circlesPostId}`)
}
// 跳转到用户主页
const navUserHomePage = (uId: number) => {
  tnNavPage(`/pagesA/userhome?otherUserId=${uId}`)
}

// 跳转到话题详情页面
// eslint-disable-next-line camelcase
const navTopicDetailPage = (topic_name: string) => {
  tnNavPage(
    // eslint-disable-next-line camelcase
    `/circlesPages/topic/detail?topicName=${topic_name}`
  )
}

const navCirclesManage = () => {
  tnNavPage(`/circlesPages/manage/manage?circlesId=${state.circlesId}`)
}

const getTopupDynamicLists = () => {
  circles
    .topupDynamicLists({
      circles_id: state.circlesId,
    })
    .then((res) => {
      console.log(res.data, 'getTopupDynamicLists')
      if (res.code == 1) {
        state.topCirclesPostLists = res.data
        state.topData = res.data.map(
          (circlesPost: { content: string }) => circlesPost.content
        )
      }
    })
    .catch((err) => {
      console.log(err, 'getTopupDynamicLists')
    })
}

const clickTopCirclesPost = (index: number) => {
  const id = state.topCirclesPostLists[index].id
  navCirclesPostDetailPage(id)
}

const getCirclesDetail = () => {
  circles
    .circlesDetail({
      circles_id: state.circlesId,
    })
    .then((res) => {
      if (res.code == 1) {
        state.circles = res.data
        console.log(res.data, 'getCirclesDetail')
        const platesArray = res.data.open_plate.split(',')
        state.openPlates = state.publishPlate.filter((item) => {
          item.jump_url =
            item.jump_url +
            '?circlesId=' +
            state.circlesId +
            '&name=' +
            state.circles.name +
            '&plate=' +
            item.plate
          return platesArray.includes(item.plate)
        })
        state.tabsPlateData = state.tabsData.filter((item) => {
          return platesArray.includes(item.plate)
        })
      }
    })
    .catch((err) => {
      console.log(err, 'getCirclesDetail')
    })
}

const handleCirclesPlateClick = (index, plate) => {
  state.currentTagIndex = -1
  state.circlesZoneId = 0
  state.circlesPlate = plate
  getCirclesZone(plate)
  paging.value.reload(true)
}

const getCirclesZone = (circlesPlate: any) => {
  circles
    .circlesZone({
      circles_id: state.circlesId,
      plate: circlesPlate,
    })
    .then((res) => {
      if (res.code == 1) {
        state.tagsData = res.data
      }
    })
    .catch((err) => {
      console.log(err, 'getCirclesZone')
    })
}

const userJoinCircles = () => {
  if (state.circles.join_method == 30 && state.applyReason == '') {
    // 需要填写加入理由
    state.circlesJoinModalRef = true
    return
  }
  state.loading = true
  user
    .joinCircles({
      circles_id: state.circlesId,
      apply_reason: state.applyReason,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        duration: 2000,
        icon: 'none',
      })
      if (res.code == 1) {
        if (state.circles.join_method == 10) {
          state.circles.user_join_status = '1'
        } else {
          state.circles.user_join_status = '0'
        }

        state.applyReason = ''
        state.loading = false
        state.circlesJoinModalRef = false
        state.showJoinUpPopup = false
      }
    })
    .catch((err) => {
      console.log(err, 'userJoinCircles')
    })
}

const openActionSheet = () => {
  actionSheetRef.value?.show({
    actions: [{ text: '退出圈子', value: '1' }],
    cancelText: '取消',
    select: (index: number, value?: string | number) => {
      if (index === 0) {
        user
          .exitCircles({
            circles_id: state.circlesId,
          })
          .then((res) => {
            if (res.code == 1) {
              uni.showToast({
                title: '退出成功',
                duration: 2000,
                icon: 'none',
              })
              state.circles.user_join_status = '-1'
            } else {
              uni.showToast({
                title: res.msg,
                duration: 2000,
                icon: 'none',
              })
            }
          })
          .catch((err) => {
            console.log(err, 'exitCircles')
          })
        return true
      }
    },
    mask: true,
  })
}

const queryList = (pageNo: any, pageSize: any) => {
  circles
    .circlesPostLists({
      circles_id: state.circlesId,
      plate: state.circlesPlate,
      circles_zone_id: state.circlesZoneId,
      page: pageNo,
      page_size: pageSize,
      weigh: state.sortValue,
    })
    .then((res) => {
      console.log(res, 'getCirclesPostLists')
      if (res.code == 1) {
        res.data.forEach((dynamic) => {
          if (dynamic.attachment_type == 'image') {
            if (Array.isArray(dynamic.attachment)) {
              // 遍历 attachment 数组
              dynamic.attachment = dynamic.attachment.map((attachment) => {
                return `${FILE_URL}${attachment}`
              })
            }
          }
        })
        paging.value.complete(res.data)
      }
    })
    .catch((err) => {
      console.log(err, 'getCirclesPostLists')
      paging.value.complete(false)
    })
}

const circlesFootprint = () => {
  user
    .circlesFootprint({
      circles_id: state.circlesId,
    })
    .then((res) => {})
    .catch((err) => {
      console.log(err, 'circlesFootprint')
    })
}
onLoad((options) => {
  if (!options?.circlesId) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.circlesId = options.circlesId
  getCirclesDetail()
  getCirclesZone('dynamic')
  getTopupDynamicLists()
  state.userToken = uni.getStorageSync(USER_TOKEN)

  state.systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
  state.publishPlate = state.systemConfig.publish.publish_plate

  if (state.circles.user_join_status == '3') {
    state.showBlockPopup = true
  }

  circlesFootprint()

  setTimeout(() => {
    if (state.circles.user_join_status == '-1') {
      state.showJoinUpPopup = true
    }
  }, 10000)
})

onShareAppMessage(() => {
  return {
    title: state.circles.name,
    path: `/circlesPages/detail?circlesId=${state.circlesId}`,
    imageUrl: FILE_URL + state.circles.image,
  }
})
onShareTimeline(() => {
  return {
    title: state.circles.name,
    path: `/circlesPages/detail?circlesId=${state.circlesId}`,
    imageUrl: FILE_URL + state.circles.image,
  }
})
onShow(() => {
  // paging.value.reload(true)
})
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      back-icon="discover-fill"
      back-text=""
      home-icon=""
      :bottom-shadow="false"
      :placeholder="false"
      :bg-color="`rgba(255, 255, 255, ${navbarOpacity})`"
      @init-finish="navbarInitFinishHandle"
    >
      <view class="navbar">
        <view
          class="box"
          :style="{
            color: `rgba(0, 0, 0 , ${navbarOpacity})`,
          }"
        >
          <view class="box__tips tn-text-ellipsis-1 tn-text-center">
            {{ state.circles.name || '' }}
          </view>
        </view>
      </view>
    </TnNavbar>
    <!-- 圈子概述 -->
    <view class="page" :style="{ paddingTop: `${navbarHeight + 20}px` }">
      <!-- 顶部背景 -->
      <view
        class="top-bg"
        :style="
          'background: url(' +
          FILE_URL +
          state.circles.bg_image +
          '); background-repeat: no-repeat;background-size: cover;background-position: center center;'
        "
      />
      <view class="circles-content">
        <view class="avatar-name">
          <view class="avatar">
            <image
              class="tn-image"
              :src="FILE_URL + state.circles.image"
              mode="aspectFill"
            />
          </view>
          <view class="info">
            <view class="title tn-text-ellipsis-1">
              {{ state.circles.name }}
            </view>
            <view class="desc">
              <span>帖子{{ state.circles.dynamic_total }}</span>
              <TnIcon name="title" />
              <span @click="viewMember">
                成员
                {{ state.circles.follow_total }}
                <TnIcon name="right" :bold="true" />
              </span>
            </view>
          </view>
          <view class="">
            <TnButton
              v-if="state.circles.user_join_status == '-1'"
              bg-color="#fbbd12"
              :custom-style="{
                borderRadius: '50rpx',
                padding: '10rpx 20rpx',
                color: '#fff',
                fontWeight: 500,
              }"
              :loading="state.loading"
              @click="userJoinCircles"
            >
              加入
            </TnButton>
            <TnButton
              v-if="state.circles.user_join_status == '1'"
              :custom-style="{
                borderRadius: '50rpx',
                padding: '10rpx 20rpx',
                color: '#fff',
                fontWeight: 500,
              }"
              @click="openActionSheet"
            >
              <TnIcon name="align" />
            </TnButton>
            <TnActionSheet ref="actionSheetRef" />
            <TnButton
              v-if="state.circles.user_join_status == '0'"
              :custom-style="{
                borderRadius: '50rpx',
                padding: '10rpx 20rpx',
                color: '#fff',
                fontWeight: 500,
              }"
              type="info"
            >
              管理审核中
            </TnButton>
          </view>
        </view>
        <view class="circles-info">
          <view class="tn-flex tn-flex-row tn-text-sm" @click="viewIntroduce">
            <view class="tn-flex justify-start items-center tn-text-ellipsis-1">
              {{ state.circles.introduce }}
            </view>
            <view class="tn-flex justify-end items-center">
              <TnIcon name="right" />
            </view>
          </view>
          <view v-if="state.circles.poiaddress != ''" class="tn-mt-xs">
            <TnTag
              shape="round"
              bg-color="rgba(255, 255, 255, 0.3)"
              :custom-style="{
                borderRadius: '50rpx',
                padding: '6rpx 12rpx',
                marginTop: '15rpx',
                marginRight: '15rpx',
                fontSize: '22rpx',
              }"
              @click="
                jumpMap(
                  state.circles.longitude,
                  state.circles.latitude,
                  '',
                  state.circles.poiaddress
                )
              "
            >
              <TnIcon name="location" size="26rpx" />
              {{ state.circles.poiaddress }}
            </TnTag>
          </view>
          <!-- 操作 -->
          <view class="operate">
            <TnScrollList :indicator="false">
              <view class="operate-container">
                <view
                  v-if="state.circles.is_manage == 1"
                  class="scroll-item tn-flex-center tn-flex-column"
                  @click="navCirclesManage"
                >
                  <view class="icon">
                    <TnIcon name="menu-set-fill" size="55rpx" />
                  </view>
                  <view class="text">圈子管理</view>
                </view>
                <view
                  class="scroll-item tn-flex-center tn-flex-column"
                  @click="openWechatIdModal"
                >
                  <view class="icon">
                    <TnIcon name="wechat-fill" size="55rpx" color="#28b83e" />
                  </view>
                  <view class="text">圈主微信</view>
                </view>
                <!-- <view
                  class="scroll-item tn-flex-center tn-flex-column"
                  @tap.stop=""
                >
                  <view class="icon">
                    <TnIcon name="circle-more" size="50rpx" />
                  </view>
                  <view class="text">友情圈</view>
                </view>
                <view
                  class="scroll-item tn-flex-center tn-flex-column"
                  @tap.stop=""
                >
                  <view class="icon">
                    <TnIcon name="ad-fill" size="50rpx" />
                  </view>
                  <view class="text">广告投放</view>
                </view> -->
              </view>
            </TnScrollList>
          </view>
        </view>
      </view>
      <tn-modal ref="wechatIdModalRef" />
      <!-- 圈子分区 -->
      <TnSticky
        :id="triggerElementId"
        :offset-top="navBarInfo.height"
        class="zone-sticky"
      >
        <view class="circles-zone">
          <view class="circles-plate">
            <TnTabs
              v-model="state.currentTabIndex"
              font-size="34"
              active-font-size="40"
              :bottom-shadow="false"
              color="#7d7d7d"
              active-color="#080808"
            >
              <TnTabsItem
                v-for="(item, index) in state.tabsPlateData"
                :key="index"
                :title="item.text"
                @click="handleCirclesPlateClick(index, item.plate)"
              />
              <template #bar>
                <view class="custom-bar">
                  <TnIcon name="tabs-smile" />
                </view>
              </template>
            </TnTabs>
          </view>

          <view class="tn-flex tn-flex-row items-center">
            <view class="justify-start" style="width: 82%">
              <TnScrollList v-if="state.tagsData.length > 0" :indicator="false">
                <view class="zone-container">
                  <TnTag
                    v-for="(item, index) in state.tagsData"
                    :key="index"
                    shape="round"
                    bg-color="#f8f7f8"
                    :border="false"
                    :border-color="
                      state.currentTagIndex == index ? '#01beff' : '#ebebeb'
                    "
                    :text-color="
                      state.currentTagIndex == index ? '#01beff' : '#7d7d7d'
                    "
                    :custom-style="{
                      borderRadius: '6rpx',
                      padding: '10rpx 14rpx',
                      marginRight: '20rpx',
                      fontSize: '24rpx',
                    }"
                    custom-class="zone-item tn-flex-center tn-flex-column"
                    @click="handleTagClick(index, item.id)"
                  >
                    {{ item.name }}
                  </TnTag>
                </view>
              </TnScrollList>
            </view>
            <view
              class="justify-end items-center"
              style="
                width: 18%;
                text-align: center;
                font-size: 28rpx;
                color: #080808;
              "
            >
              <TnBubbleBox
                :options="bubbleOptions"
                position="bottom"
                @click="clickBubbleOptions"
              >
                {{ state.sortName }}<TnIcon name="down-triangle" size="34rpx" />
              </TnBubbleBox>
            </view>
          </view>
        </view>
      </TnSticky>
      <!-- 动态列表 -->
      <z-paging
        ref="paging"
        v-model="state.circlesPostLists"
        use-page-scroll
        @query="queryList"
      >
        <template #refresher="{ refresherStatus }">
          <CustomRefresher :status="refresherStatus" />
        </template>
        <view class="circles-post-list">
          <!-- 动态置顶 -->
          <view
            v-if="state.currentTabIndex == 0 && state.topData.length > 0"
            class="top-container"
          >
            <view class="top-info">
              <view class="icon">
                <image src="@/static/images/top.png" mode="aspectFit" />
              </view>
              <view class="tn-text-ellipsis-1">
                <TnNoticeBar
                  text-color="tn-orange"
                  bg-color="tn-type-warning_bg"
                  :data="state.topData"
                  direction="vertical"
                  loop
                  @click="clickTopCirclesPost"
                />
              </view>
            </view>
          </view>
          <view
            v-for="(item, index) in state.circlesPostLists"
            :key="index"
            class="dynamic"
          >
            <view class="graphic-card">
              <!-- 简要信息 -->
              <view class="brief-info">
                <view class="brief-info__content">
                  <view class="brief-info__avatar">
                    <TnAvatar
                      v-if="item.user.is_vip == 1"
                      :url="FILE_URL + item.user.avatar"
                      :border="true"
                      :shadow="true"
                      img-mode="aspectFill"
                      size="lg"
                      badge="icon-vip-diamond-fill"
                      :badge-config="{
                        absoluteCenter: false,
                        absolutePosition: {
                          top: '60rpx',
                          right: '-10rpx',
                        },
                        fontSize: '35',
                        textColor: '#FFB800',
                        bgColor: '#FFFFFF',
                        size: '40',
                      }"
                      @click="navUserHomePage(item.user.id)"
                    />
                    <TnAvatar
                      v-else
                      :url="FILE_URL + item.user.avatar"
                      :border="true"
                      :shadow="true"
                      img-mode="aspectFill"
                      size="lg"
                      @click="navUserHomePage(item.user.id)"
                    />
                  </view>
                  <view class="brief-info__data">
                    <view class="title tn-text-ellipsis-1">
                      <text @click="navUserHomePage(item.user.id)">
                        {{ item.user.nickname }}
                      </text>
                      <image
                        v-if="item.user.grade_icon != ''"
                        :src="FILE_URL + item.user.grade_icon"
                        class="user-level-img"
                      />
                    </view>
                    <view class="desc tn-text-ellipsis-1">
                      {{ item.update_date }}
                    </view>
                  </view>
                </view>
              </view>
              <!-- 内容容器 -->
              <view class="container">
                <!-- 内容 -->
                <view class="content tn-text-ellipsis-5">
                  <!-- 标签和内容 -->
                  <view class="content__tags">
                    <view
                      v-for="(tagItem, tagIndex) in item.topics_name"
                      :key="tagIndex"
                      class="tag-item"
                    >
                      <text @click="navTopicDetailPage(tagItem)">
                        #{{ tagItem }}
                      </text>
                    </view>
                  </view>
                  <view
                    class="content__data"
                    @tap.stop="navCirclesPostDetailPage(item.id)"
                  >
                    <text>{{ item.content }}</text>
                  </view>
                </view>
                <!-- 图片列表 -->
                <view
                  v-if="item.attachment_type == 'image'"
                  class="images"
                  @tap.stop="navCirclesPostDetailPage(item.id)"
                >
                  <!-- 一张图片 -->
                  <view v-if="item.attachment.length === 1" class="images-one">
                    <TnLazyLoad :src="item.attachment[0]" />
                  </view>
                  <!-- 两张图片 -->
                  <view v-if="item.attachment.length === 2" class="images-two">
                    <TnPhotoAlbum :data="item.attachment" :column="2" />
                  </view>
                  <!-- 三张图片 -->
                  <view
                    v-if="item.attachment.length === 3"
                    class="images-three"
                  >
                    <view class="image-wrapper-left">
                      <view class="image-container">
                        <TnLazyLoad :src="item.attachment[0]" />
                      </view>
                    </view>
                    <view class="image-wrapper-right">
                      <view class="image-container">
                        <TnLazyLoad :src="item.attachment[1]" />
                      </view>
                      <view class="image-container">
                        <TnLazyLoad :src="item.attachment[2]" />
                      </view>
                    </view>
                  </view>
                  <!-- 四张图片 -->
                  <view v-if="item.attachment.length === 4" class="images-four">
                    <TnPhotoAlbum :data="item.attachment" :column="2" />
                  </view>
                  <TnPhotoAlbum
                    v-if="item.attachment.length >= 5"
                    :data="item.attachment"
                  />
                </view>

                <!-- 视频 -->
                <view
                  v-if="item.attachment_type == 'video'"
                  class="content-video"
                  @click="navVideoLists(item.id)"
                >
                  <view class="video-icon">
                    <TnIcon name="video-fill" size="100" color="#FFFFFF" />
                  </view>
                  <video
                    class="video-data"
                    :src="FILE_URL + item.attachment"
                    :muted="true"
                    object-fit="cover"
                    :enable-progress-gesture="false"
                    :show-loading="false"
                    :show-play-btn="false"
                    :show-center-play-btn="false"
                    :show-fullscreen-btn="false"
                    :controls="false"
                    :autoplay="false"
                    :enable-play-gesture="false"
                    :loop="true"
                  />
                </view>

                <!-- 语音 -->
                <view v-if="item.attachment_type == 'voice'" class="audio">
                  <luch-audio
                    :play.sync="true"
                    :name="item.user.nickname"
                    author="录制"
                    :poster="FILE_URL + item.user.avatar"
                    :src="FILE_URL + item.attachment"
                    :autoplay="false"
                  />
                </view>
              </view>

              <!-- 链接 -->
              <view v-if="item.attachment_type == 'link'" class="link">
                <uni-link
                  :href="item.attachment"
                  :text="item.attachment"
                  color="#007BFF"
                  copy-tips="链接已复制"
                  font-size="18"
                />
              </view>

              <!-- 底部信息 -->
              <view v-if="item.location !== ''" class="location-info">
                <TnButton
                  plain
                  border-color="tn-grey-disabled"
                  custom-class="custom-button-class"
                  @click="
                    jumpMap(
                      item.longitude,
                      item.latitude,
                      item.location,
                      item.poiaddress
                    )
                  "
                >
                  <TnIcon name="location-fill" color="tn-blue" />
                  <view class="location-name">{{ item.location }}</view>
                </TnButton>
              </view>
              <view class="bottom-info">
                <view class="bottom-info__left">
                  <view v-if="item.plate == 'usedIdle'" class="money">
                    ¥ {{ item.money }}
                  </view>
                  <view v-if="item.plate == 'organizeBureau'">
                    <TnTag
                      shape="round"
                      bg-color="#ffca28"
                      :border="false"
                      :custom-style="{
                        borderRadius: '10rpx 10rpx 0rpx 10rpx',
                        padding: '8rpx 12rpx',
                        marginRight: '20rpx',
                        fontSize: '24rpx',
                      }"
                    >
                      组局 {{ item.activity_join_num }}/{{ item.activity_num }}
                    </TnTag>
                  </view>
                </view>
                <view class="bottom-info__right">
                  <!-- 底部右侧数据 -->
                  <view class="count-item-data">
                    <TnIcon name="eye" />
                    <view class="count">{{ item.view_total }}</view>
                  </view>
                  <view class="count-item-data">
                    <TnIcon name="message" />
                    <view class="count"> {{ item.comment_total }} </view>
                  </view>
                  <view v-if="item.plate == 'dynamic'" class="count-item-data">
                    <TnIcon name="like" />
                    <view class="count">{{ item.like_total }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view
              style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
            />
          </view>
          <!-- 悬浮发布按钮 -->
          <TnSuspendButton
            icon="add"
            bg-color="#fbbd12"
            text-color="#fff"
            top="90%"
            right="30"
            :opacity="1"
            @click="handlePublishPopupClick"
          />

          <!-- 发布弹窗 -->
          <TnPopup v-model="state.showPublishPopup" open-direction="bottom">
            <view class="publish">
              <view class="publish-list">
                <view
                  v-for="(item, index) in state.openPlates"
                  :key="index"
                  class="list-item"
                  style="background-color: #f8f7f8"
                >
                  <view
                    class="list-info"
                    @click="
                      jumpPublishPage(
                        item.jump_url + '?circlesId=' + state.circlesId
                      )
                    "
                  >
                    <view class="image">
                      <image
                        class="tn-image"
                        :src="FILE_URL + item.image"
                        mode="aspectFill"
                      />
                    </view>
                    <view class="title-desc">
                      <view class="title tn-text-ellipsis-1">{{
                        item.title
                      }}</view>
                      <view class="item-desc tn-text-ellipsis-1">{{
                        item.desc
                      }}</view>
                    </view>
                    <view class="">
                      <TnIcon name="right" :bold="true" />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </TnPopup>
        </view>
      </z-paging>
    </view>

    <!-- 圈子介绍 -->
    <TnPopup v-model="state.showIntroducePopup" width="90%" height="800">
      <view class="tn-p-lg"> {{ state.circles.introduce }} </view>
    </TnPopup>

    <!-- 加入圈子填写申请理由 -->
    <TnPopup
      v-model="state.circlesJoinModalRef"
      open-direction="bottom"
      :close-btn="true"
      bg-color="#f8f7f8"
    >
      <view class="tn-text-center tn-mt tn-text-xl"> 请填写申请理由 </view>
      <view class="tn-pl-xl tn-pr-xl">
        <TnInput
          v-model="state.applyReason"
          type="textarea"
          placeholder="请输入申请理由"
          height="150"
          :maxlength="100"
          :show-word-limit="true"
          :custom-style="{
            marginTop: '15px',
            marginBottom: '20rpx',
          }"
        />
        <TnButton
          width="100%"
          height="70"
          :loading="state.loading"
          @click="userJoinCircles"
          >提 交</TnButton
        >
      </view>
    </TnPopup>
    <TnPopup
      v-model="state.showBlockPopup"
      width="80%"
      :overlay-closeable="false"
      :overlay-opacity="0.9"
    >
      <view class="tn-p-lg tn-text-bold tn-text-center tn-text-xl"> 提示 </view>
      <view class="tn-pl-lg tn-pr-lg tn-pb-lg tn-text-lg">
        <view>您已被本社群管理员加入黑名单，无法访问该圈子内容，请理解。</view>
      </view>
    </TnPopup>

    <TnPopup v-model="state.showJoinUpPopup" width="90%">
      <view class="tn-p-lg tn-text-bold tn-text-center tn-text-xl">
        逛了这么久，快来加入我们吧
      </view>
      <view class="tn-pl-lg tn-pr-lg tn-text-lg">
        渴望与你携手，共同编织动态分享的乐趣，参与那些激荡思维的精彩讨论。
      </view>
      <view class="tn-m tn-text-center">
        <TnButton
          bg-color="#fbbd12"
          width="90%"
          height="80"
          :loading="state.loading"
          @click="userJoinCircles"
        >
          加 入
        </TnButton>
      </view>
    </TnPopup>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/detail.scss';
@use '@/static/css/graphic-card.scss';
</style>
